<!-- home -->
<template>
  <div class="container">

    <van-nav-bar
      title="费用填报"
      class="navclass"
      left-arrow
      left-text="返回"
      @click-left="doback"
    />

    <van-cell title="填报人：" v-model="ywyname" />

    <van-cell title="选择缴费日期" required v-model="date" @click="onDisplay" is-link />

    <van-calendar v-model="dateshow" @close="onClose" @confirm="onConfirm" :show-confirm="kjflag"  :min-date="minDate" :default-date="currentDate" />
    <van-field
      v-model="zje"
      label="总金额(元):"
      placeholder="总金额(元)"
      type="digit"
    />

    <van-field
      v-model="bz"
      label="备注"
      placeholder="请输入备注"
      type="textarea"
    />

    <div  class="btn" >
      <van-button type="info" size="large" round @click="doSubmit" >提交</van-button>
    </div>

   <!-- <van-action-sheet v-model="show" :actions="actions" @select="onSelectfblx" />

    <van-action-sheet v-model="dklxshow" :actions="dkactions" @select="onSelectDklx" />-->

  </div>
</template>

<script>

import { Dialog, Toast, Grid, GridItem, Calendar, Cell } from 'vant'

import { addCost, queryUserInfo, updateCost } from '../../api/api'

export default {
  name: 'AddFy',
  data() {
    return {
      companyListFront: [],
      companyList1: [],
      platformProductCategory: [],
      platformCategory: '',
      productList: [],
      pageNum: 1,
      pageSize: 10,
      date: '',
      show: false,
      kjflag: false,
      showfblx: false,
      showspdl: false,
      ywlxname: '',
      ywlx: '',
      dateshow: false,
      actions: [],
      dkactions: [],
      dklxname: '',
      dklx: '',
      dklxshow: false,
      minDate: new Date(2021, 1, 1),
      zje: '',
      ywyname: '',
      bz: '',
      currentDate: new Date(),
      costid: ''

    }
  },

  created() {
    this.queryUserInfo()
    this.ywyname = this.$store.getters.userName
    const item = this.$route.query.item
    console.log('已填报')
    console.log(item)
    if (item) {
      this.zje = item.zje
      this.date = item.date
      this.bz = item.bz
      this.currentDate = new Date(item.date)
      this.costid = item.costid
    }
  },
  mounted() {

  },

  methods: {

    queryUserInfo() {
      const param = {}
      queryUserInfo(param).then(response => {
        if (response.code === 200) {
          console.log(response)
          this.ywyname = response.data.name
          this.userid = response.data.userid
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    addyj() {
      this.$router.push({ path: '/addyj', query: {}})
    },

    onDisplay() {
      this.dateshow = true
    },
    onClose() {
      this.show = false
    },

    onConfirm(event) {
      this.dateshow = false
      this.date = this.formatDate(event)
    },

    formatDate(date) {
      const date1 = new Date(date)
      return `${date1.getFullYear()}-${date1.getMonth() + 1}-${date1.getDate()}`
    },

    showFblx() {
      this.show = true
    },

    showDklx() {
      if (!this.ywlx) {
        Dialog.alert({
          title: '',
          message: '先选择业务类型'
        })
        return
      }
      this.dklxshow = true
    },

    doSubmit() {
      if (!this.date) {
        Toast.fail('请选择日期')
        return
      }

      if (!this.zje) {
        Toast.fail('请填写总金额')
        return
      }

      const costid = this.costid

      if (costid) {
        const param = { date: this.date, zje: this.zje, bz: this.bz, costid: this.costid }
        updateCost(param).then(response => {
          if (response.code === 200) {
            Dialog.alert({
              title: '',
              message: '修改成功'
            }).then(() => {
              // on close
              this.$router.go(-1) // 返回上一层
            })
          } else {
            Toast.fail(response.msg)
          }
        })
      } else {
        const param = { date: this.date, zje: this.zje, bz: this.bz }
        addCost(param).then(response => {
          if (response.code === 200) {
            Dialog.alert({
              title: '',
              message: '提交成功'
            }).then(() => {
              // on close
              this.$router.go(-1) // 返回上一层
            })
          } else {
            Toast.fail(response.msg)
          }
        })
      }
    },

    doback() {
      this.$router.go(-1) // 返回上一层
    }

  }
}
</script>
<style lang="scss" scoped>

  .container{
    width: 100%;
    height: calc(100vh);
    background-color: white;
  }

  .navclass{
    background-color:#f8f8f8;
  }

  .btn{
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 30px;
    background-color: white;
    padding-bottom: 150px;
  }

</style>
